<template>
  <!-- 右边部分 -->
  <div class="listright">
    <div class="thefirstrow">
      <h3 class="handleline">
        <span class="handlelinege">入驻歌手</span>
        <router-link to="/discover/artist/singed" class="more">更多 ></router-link>
      </h3>
      <div class="image">
        <ul class="imagebox">
          <li v-for="item in artistsList" :key="item.accountId">
            <div class="imageimage">
              <router-link to="/discover/artist/artistlist" :title="item.name">
                <img class="imagemao" :src="item.picUrl" alt="" />
              </router-link>
              <div class="imagename">
                <router-link to="" class="imagenamename">{{
                  item.name
                }}</router-link>
                <router-link
                  to=""
                  class="el-icon-user"
                  title="item.name"
                ></router-link>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="thefirstrow">
      <h3 class="handleline">
        <span class="handlelinege">热门歌手</span>
        <!-- <span class="more">更多 ></span> -->
      </h3>
      <div class="image">
        <ul class="imagebox">
          <li v-for="item in artistsList" :key="item.id">
            <div class="imageimage">
              <router-link to="/discover/artist/artistlist" :title="item.name"
                ><img class="imagemao" :src="item.picUrl"
              /></router-link>
              <div class="imagename">
                <router-link to="" class="imagenamename">{{
                  item.name
                }}</router-link>
                <router-link
                  to=""
                  class="el-icon-user"
                  :title="item.name"
                ></router-link>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="staraName">
      <div class="starname">
        <div class="difirstlineyige">
          <ul>
            <li v-for="item in artistsList" :key="item.accountId">
              <router-link to="" class="namehome">{{ item.name }}</router-link>
              <router-link
                to=""
                class="el-icon-user"
                :title="item.name"
              ></router-link>
            </li>
          </ul>
        </div>
        <div class="difirstlineyige">
          <ul>
            <li v-for="item in artistsList" :key="item.accountId">
              <router-link to="" class="namehome">{{ item.name }}</router-link>
              <router-link
                to=""
                class="el-icon-user"
                :title="item.name"
              ></router-link>
            </li>
          </ul>
        </div>
        <div class="difirstlineyige">
          <ul>
            <li v-for="item in artistsList" :key="item.accountId">
              <router-link to="" class="namehome">{{ item.name }}</router-link>
              <router-link
                to=""
                class="el-icon-user"
                :title="item.name"
              ></router-link>
            </li>
          </ul>
        </div>
        <div class="difirstlineyige">
          <ul>
            <li v-for="item in artistsList" :key="item.accountId">
              <router-link to="" class="namehome">{{ item.name }}</router-link>
              <router-link
                to=""
                class="el-icon-user"
                :title="item.name"
              ></router-link>
            </li>
          </ul>
        </div>
        <div class="difirstlineyige">
          <ul>
            <li v-for="item in artistsList" :key="item.accountId">
              <router-link to="" class="namehome">{{ item.name }}</router-link>
              <router-link
                to=""
                class="el-icon-user"
                :title="item.name"
              ></router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'Singer',
  methods: {
    // vux数据逻辑
    ...mapActions('singerlist', ['getSingerList'])
  },
  mounted() {
    this.getSingerList()
  },

  computed: {
    ...mapState('singerlist', ['artistsList'])
  }
}
</script>

<style lang="less">

</style>
